<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layuiAdmin 主页示例模板二</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">

			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						访问量 <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font">${applicationScope.count}</p>
						<!-- <p>
							总计访问量 <span class="layuiadmin-span-color">88万 <i
								class="layui-inline layui-icon layui-icon-flag"></i></span>
						</p> -->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						会员数 <span class="layui-badge layui-bg-cyan layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font" id="userCount"></p>
						<!-- 	<p>
							<span class="layuiadmin-span-color"> <i
								class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
						</p> -->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						订单数<span class="layui-badge layui-bg-green layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p class="layuiadmin-big-font" id="orderCount"></p>
<!-- 						<p>
							总收入 <span class="layuiadmin-span-color">*** <i
								class="layui-inline layui-icon layui-icon-dollar"></i></span>
						</p> -->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						营业额 <span class="layui-badge layui-bg-orange layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p id="totalTurnover" class="layuiadmin-big-font"></p>
<!-- 						<p>
							最近一个月 <span class="layuiadmin-span-color">15% <i
								class="layui-inline layui-icon layui-icon-user"></i></span>
						</p> -->
					</div>
				</div>
			</div>
			<div class="layui-col-sm12">
				<div class="layui-card">
					<div class="layui-card-header">
						访问量
						<div class="layui-btn-group layuiadmin-btn-group">
							<a href="javascript:;"
								class="layui-btn layui-btn-primary layui-btn-xs">去年</a> <a
								href="javascript:;"
								class="layui-btn layui-btn-primary layui-btn-xs">今年</a>
						</div>
					</div>
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-sm8">
								<div class="layui-carousel layadmin-carousel layadmin-dataview"
									data-anim="fade" lay-filter="LAY-index-pagetwo">
									<div carousel-item id="LAY-index-pagetwo">
										<div>
											<i class="layui-icon layui-icon-loading1 layadmin-loading"></i>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-col-sm4">
								<div class="layuiadmin-card-list">
									<p class="layuiadmin-normal-font">月访问数</p>
									<span>同上期增长</span>
									<div class="layui-progress layui-progress-big"
										lay-showPercent="yes">
										<div class="layui-progress-bar" lay-percent="30%"></div>
									</div>
								</div>
								<div class="layuiadmin-card-list">
									<p class="layuiadmin-normal-font">月下载数</p>
									<span>同上期增长</span>
									<div class="layui-progress layui-progress-big"
										lay-showPercent="yes">
										<div class="layui-progress-bar" lay-percent="20%"></div>
									</div>
								</div>
								<div class="layuiadmin-card-list">
									<p class="layuiadmin-normal-font">月收入</p>
									<span>同上期增长</span>
									<div class="layui-progress layui-progress-big"
										lay-showPercent="yes">
										<div class="layui-progress-bar" lay-percent="25%"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- <div class="layui-col-sm8">
				<div class="layui-row layui-col-space15">


					<div class="layui-col-sm12">
						<div class="layui-card">
							<div class="layui-card-header">用户全国分布</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space15">
									<div class="layui-col-sm4">
										<table class="layui-table layuiadmin-page-table"
											lay-skin="line">
											<thead>
												<tr>
													<th>排名</th>
													<th>地区</th>
													<th>人数</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>1</td>
													<td>浙江</td>
													<td>62310</td>
												</tr>
												<tr>
													<td>2</td>
													<td>上海</td>
													<td>59190</td>
												</tr>
												<tr>
													<td>3</td>
													<td>广东</td>
													<td>55891</td>
												</tr>
												<tr>
													<td>4</td>
													<td>北京</td>
													<td>51919</td>
												</tr>
												<tr>
													<td>5</td>
													<td>山东</td>
													<td>39231</td>
												</tr>
												<tr>
													<td>6</td>
													<td>湖北</td>
													<td>37109</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="layui-col-sm8">

										<div
											class="layui-carousel layadmin-carousel layadmin-dataview"
											data-anim="fade" lay-filter="LAY-index-pagethree">
											<div carousel-item id="LAY-index-pagethree">
												<div>
													<i class="layui-icon layui-icon-loading1 layadmin-loading"></i>
												</div>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> -->
	</div>
	</div>

	<!--图表-->
	<!-- <div class="chart-panel panel panel-default">
		<div class="panel-body" id="chart" style="height: 376px;">
			<h1>test- h1</h1>
		</div> 

	</div>-->
	<!--图表-->
	<div id="main" style="width: 800px; height: 500px;"></div>

	<script src="layuiadmin/echar/echarts.min.js"></script>
	<script src="layuiadmin/layui/layui.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$.ajax({
				url : "userapi/getUserCount",
				type : "get",
				dataType : "json",
				success : function(data) {
					$("#userCount").html(data.userCount)

				}

			})
			$.ajax({
				url : "getOrderCount",
				type : "get",
				dataType : "json",
				success : function(data) {
					$("#orderCount").html(data.orderCount)
					$("#totalTurnover").html(data.totalTurnover)
				}

			})

		})
	</script>

	<script type="text/javascript">
		layui.use([ 'layer', 'jquery' ], function() {
			var layer = layui.layer;
			var $ = layui.jquery;
			var checkInDateArray = [];
			var countArray = [];

			//此处使用jquery的ajax方法获取统计数据，将值放到图表中
			$.ajax({
				url : "orderEchar",
				type : "get",
				dataType : "json",
				success : function(data) {
					console.log(data)
					//得到一个数组,需要遍历
					$.each(data, function(index, obj) {
						console.log(obj.checkInDate + "," + obj.count);
						//将值添加到数据
						checkInDateArray.push(obj.checkInDate);
						countArray.push(obj.count);

						var myChart = echarts.init(document
								.getElementById('main'));

						// 指定图表的配置项和数据
						var option = {
							title : {
								text : '七天订单图'
							},
							tooltip : {},
							legend : {
								data : [ '订单量' ]
							},
							xAxis : {
								data : checkInDateArray
							},
							yAxis : {},
							series : [ {
								name : '订单数',
								type : 'bar',
								data : countArray
							} ]
						};

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);

					});
				}

			});
		});

		// 基于准备好的dom，初始化echarts实例
	</script>







	<script>
		layui.config({
			base : 'layuiadmin/' //静态资源所在路径
		}).extend({
			index : 'lib/index' //主入口模块
		}).use([ 'index', 'sample' ]);
	</script>
</body>
</html>